<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后台登录-X-admin2.0</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../static/css/font.css" th:href="@{/css/font.css}">
	<link rel="stylesheet" href="../static/css/xadmin.css" th:href="@{/css/xadmin.css}">
    <script src="../static/js/jquery-3.2.1.min.js" type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <script src="../static/js/vue.js" type="text/javascript" th:src="@{/js/vue.js}"></script>
    <script src="../static/lib/layui/layui.js" charset="utf-8" th:src="@{/lib/layui/layui.js}"></script>
    <script type="text/javascript" src="../static/js/xadmin.js" th:src="@{/js/xadmin.js}"></script>

    <style>
        .layui-btn-xs{
            height: 50px;
        }
    </style>

</head>
<body class="login-bg">
    
    <div class="login">
        <div class="message">xx系统-管理登录</div>
        <div id="darkbannerwrap"></div>
       
        <button id="userBtn" type="button" 	class="layui-btn layui-btn-primary" onclick="changeView(0)">用户密码登录</button>
        <button id="smsBtn" type="button" 	class="layui-btn" onclick="changeView(1)">短信验证码登录</button>
        
		<hr class="hr15">
       
        <div id="app">
            <form class="layui-form" id="user" style="display: none;">
                <input name="username" placeholder="用户名"  type="text" lay-verify="required" class="layui-input" v-model="user.username" >
                <hr class="hr15">
                <input name="password" lay-verify="required" placeholder="密码"  type="password" class="layui-input" v-model="user.password">
                <hr class="hr15">
                <input value="登录" lay-submit lay-filter="userLogin" style="width:100%;" type="button" @click="login()">
                <hr class="hr20" >
            </form>
        </div>
        
         <form method="post" class="layui-form" id="sms">
            <input name="tel" placeholder="电话" id="phone"  type="text" lay-verify="phone" class="layui-input" >
            <hr class="hr15">
            <input name="code" lay-verify="required" placeholder="验证码"  type="password" style="width:200px" class="layui-input layui-col-sm2 ">
            <div id="send">
            	   <button id="smsBtn" type="button" style="margin-left: 10px;"	class="layui-btn layui-btn-xs" onclick="sendSms()" >发送验证码</button>
            </div>

            <hr class="hr15">
            <input value="登录" lay-submit lay-filter="smdLogin" style="width:100%;" type="button">
            <hr class="hr20" >
        </form>
    </div>

    <script>
     	layui.use('form', function(){
                var form = layui.form;
                //监听提交
                form.on('submit(smdLogin)', function(data){
                    layer.alert(JSON.stringify(data.field));
                    return false;
                });

            // 监听提交
            form.on('submit(userLogin)', function(data){

                });
            });


        // 创建vue对象
        var app = new Vue({
            // el属性：钩子、挂载点，就是用来和上述中定义的容器绑定上
            el:'#app',
            // data属性：定义变量
            data:{
                user:{
                    username:'',
                    password:'',
                },
            },
            // methods属性：用来定义方法
            methods:{
                // 定义登录方法
                login(){
                    // 如果在请求发送完成之后，还需要使用到当前的this，就需要保存当前的this
                    // 保存当前this对象，即定义一个变量，把当前this赋值给它，如 var _this = this
                    var _this = this;
                    $.ajax({
                        url:'/user/login',
                        dataType:'json',
                        type:'post',
                        data:_this.user
                        /*data:{
                            user:this.user.username,
                            user:this.user.password
                        }*/,success:function (data) {
                            if (data.code == 200){
                                location.href = "/index/"+data.info;
                            }else {
                                alert(data.msg);
                            }
                        },error:function () {
                            alert("登录服务器报错");
                        }
                    })
                }
            },
        });


        function changeView(num){
        	if (num==1){
        		//显示短信的表单
        		$("#sms").show()
        		//移除白色按钮样式
        		$("#smsBtn").removeClass("layui-btn layui-btn-primary")
        		//添加蓝色按钮样式
        		$("#smsBtn").addClass("layui-btn")
        		
        		//隐藏用户密码登录的表单
        		$("#user").hide()
        		//移除蓝色按钮样式
        		$("#userBtn").removeClass("layui-btn")
        		//添加白色色按钮样式
        		$("#userBtn").addClass("layui-btn layui-btn-primary")
        	}else{
  
        		$("#user").show()
        		$("#userBtn").removeClass("layui-btn layui-btn-primary")
        		$("#userBtn").addClass("layui-btn")
        		
        		
        		$("#sms").hide()
        		$("#smsBtn").removeClass("layui-btn")
        		$("#smsBtn").addClass("layui-btn layui-btn-primary")
        	}
        }
        //计时器秒
        var s =3
        
        function sendSms(){
        	
        	 var time = setInterval(function () {
        	     $.ajax({
                     url: '/edumsm/msm/send',
                     dataType: 'json',
                     type: 'get',
                     data:{phone:$("#phone").val()},
                     success:function (data) {
                         console.log(data);
                     }
                 })
                //禁用发送验证码按钮
                $("#send").html("<button type='button'  class='layui-btn layui-btn-disabled layui-btn-small' >"+s+"秒后发送验证码</button>")
                s--;
                if(s==0){ //倒计时结束
                    //清除计时器
                    clearInterval(time);
                    //启用发送验证码
                    $("#send").html("<button type='button' class='layui-btn'>发送验证码</button>")
                }

            },1000)

        }
    </script>

</body>
</html>